<template>
	<view class="content-manage-page">
		<!-- 顶部导航条 -->
		<view class="top-nav-bar">
			<view
				class="nav-item"
				:class="{active: activeTab==='task'}"
				@click="switchTab('task')"
			>
				<text class="nav-icon">📋</text>
				<text class="nav-text">任务审核</text>
			</view>
			<view
				class="nav-item"
				:class="{active: activeTab==='post'}"
				@click="switchTab('post')"
			>
				<text class="nav-icon">💬</text>
				<text class="nav-text">圈子内容</text>
			</view>
			<view
				class="nav-item"
				:class="{active: activeTab==='chat'}"
				@click="switchTab('chat')"
			>
				<text class="nav-icon">💼</text>
				<text class="nav-text">交易信息</text>
			</view>
		</view>
		<!-- 右侧内容区 -->
		<view class="main-content">
			<!-- 任务审核中心 -->
			<transition name="fade">
				<view v-if="activeTab==='task'" key="task" class="content-section">
					<view class="section-header">
						<view class="section-title">
							<text class="title-icon">📋</text>
							待审核任务列表
						</view>
						<view class="section-badge">{{ taskList.length }}个待审核</view>
					</view>
					<view class="section-desc">
						任务类型：出物、求购、代拿、招聘等。<br>
						审核内容包括任务描述合规性（是否含广告、违禁品）、价格合理。
					</view>
					<view v-if="taskList.length === 0" class="empty-state">
						<text class="empty-icon">📭</text>
						<text class="empty-text">暂无待审核任务</text>
						<text class="empty-desc">所有任务都已审核完毕</text>
					</view>
					<view v-else class="card-list">
						<view class="audit-card" v-for="item in taskList" :key="item.id">
							<view class="card-checkbox">
								<checkbox :checked="checkedIds.includes(item.id)" @change="toggleCheck(item.id)" />
							</view>
							<view class="card-content">
								<view class="card-header">
									<view class="card-title">{{ item.title }}</view>
									<view class="card-type">{{ item.type }}</view>
									<view v-if="item.aiFlag" class="ai-flag">
										<text class="ai-icon">🤖</text>
										AI估值异常
									</view>
								</view>
								<view class="card-info">
									<view class="info-item">
										<text class="info-label">用户：</text>
										<text class="user">{{ item.user }}</text>
									</view>
									<view class="info-item">
										<text class="info-label">发布时间：</text>
										<text class="time">{{ item.time }}</text>
									</view>
								</view>
								<view class="card-desc">
									<text class="desc-label">任务内容：</text>
									{{ item.desc }}
								</view>
								<view class="card-actions">
									<button class="btn btn-pass" @click="pass(item)">
										<text class="btn-icon">✅</text>
										通过
									</button>
									<button class="btn btn-reject" @click="openReject(item)">
										<text class="btn-icon">❌</text>
										驳回
									</button>
									<button class="btn btn-detail" @click="openDetail(item)">
										<text class="btn-icon">👁️</text>
										详情
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</transition>
			<!-- 圈子内容审核 -->
			<transition name="fade">
				<view v-if="activeTab==='post'" key="post" class="content-section">
					<view class="section-header">
						<view class="section-title">
							<text class="title-icon">💬</text>
							待审核帖子列表
						</view>
						<view class="section-badge">{{ postList.length }}个待审核</view>
					</view>
					<view class="section-desc">
						审核校园圈子中的帖子（讨论、问答、失物招领等），过滤违规内容（色情、暴力、广告、校园不良信息）。<br>
						对违规帖子可执行删除、置顶、加精操作，对发帖用户发送警告通知。
					</view>
					<view v-if="postList.length === 0" class="empty-state">
						<text class="empty-icon">📭</text>
						<text class="empty-text">暂无待审核帖子</text>
						<text class="empty-desc">所有帖子都已审核完毕</text>
					</view>
					<view v-else class="card-list">
						<view class="audit-card" v-for="item in postList" :key="item.id">
							<view class="card-checkbox">
								<checkbox :checked="checkedIds.includes(item.id)" @change="toggleCheck(item.id)" />
							</view>
							<view class="card-content">
								<view class="card-header">
									<view class="card-title">{{ item.title }}</view>
									<view class="card-type">{{ item.type }}</view>
								</view>
								<view class="card-info">
									<view class="info-item">
										<text class="info-label">发布者：</text>
										<text class="user">{{ item.user }}</text>
									</view>
									<view class="info-item">
										<text class="info-label">发布时间：</text>
										<text class="time">{{ item.time }}</text>
									</view>
								</view>
								<view class="card-desc">
									<text class="desc-label">内容：</text>
									{{ item.desc }}
								</view>
								<view class="card-actions">
									<button class="btn btn-pass" @click="passPost(item)">
										<text class="btn-icon">✅</text>
										通过
									</button>
									<button class="btn btn-reject" @click="deletePost(item)">
										<text class="btn-icon">🗑️</text>
										删除
									</button>
									<button class="btn btn-detail" @click="showDetail(item)">
										<text class="btn-icon">👁️</text>
										详情
									</button>
									<button class="btn btn-detail" @click="topPost(item)">
										<text class="btn-icon">📌</text>
										置顶
									</button>
									<button class="btn btn-detail" @click="excellentPost(item)">
										<text class="btn-icon">⭐</text>
										加精
									</button>
									<button class="btn btn-warn" @click="warnUser(item)">
										<text class="btn-icon">⚠️</text>
										警告
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</transition>
			<!-- 交易信息监控 -->
			<transition name="fade">
				<view v-if="activeTab==='chat'" key="chat" class="content-section">
					<view class="section-header">
						<view class="section-title">
							<text class="title-icon">💼</text>
							交易信息监控
						</view>
						<view class="section-badge">{{ chatList.length }}个待处理</view>
					</view>
					<view class="section-desc">
						抽查用户聊天记录（如涉及交易纠纷时），审核互评内容真实性，处理用户举报的恶意评价或欺诈行为。
					</view>
					<view v-if="chatList.length === 0" class="empty-state">
						<text class="empty-icon">📭</text>
						<text class="empty-text">暂无需监控的交易信息</text>
						<text class="empty-desc">当前没有需要处理的交易纠纷</text>
					</view>
					<view v-else class="card-list">
						<view class="audit-card" v-for="item in chatList" :key="item.id">
							<view class="card-checkbox">
								<checkbox :checked="checkedIds.includes(item.id)" @change="toggleCheck(item.id)" />
							</view>
							<view class="card-content">
								<view class="card-header">
									<view class="card-title">交易对话</view>
									<view class="card-type">{{ item.type }}</view>
								</view>
								<view class="card-info">
									<view class="info-item">
										<text class="info-label">买家：</text>
										<text class="user">{{ item.userA }}</text>
									</view>
									<view class="info-item">
										<text class="info-label">卖家：</text>
										<text class="user">{{ item.userB }}</text>
									</view>
									<view class="info-item">
										<text class="info-label">举报原因：</text>
										<text class="reason">{{ item.reason }}</text>
									</view>
								</view>
								<view class="card-desc">
									<text class="desc-label">聊天内容：</text>
									{{ item.content }}
								</view>
								<view class="card-actions">
									<button class="btn btn-pass" @click="passChat(item)">
										<text class="btn-icon">✅</text>
										无异常
									</button>
									<button class="btn btn-reject" @click="punishUser(item)">
										<text class="btn-icon">🚫</text>
										处理违规
									</button>
									<button class="btn btn-detail" @click="showDetail(item)">
										<text class="btn-icon">👁️</text>
										详情
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</transition>

			<!-- 驳回弹窗 -->
			<view v-if="showRejectModal" class="modal-mask" @click="showRejectModal=false">
				<view class="modal-box" @click.stop>
					<view class="modal-header">
						<text class="modal-icon">❌</text>
						<text class="modal-title">请输入驳回理由</text>
					</view>
					<textarea v-model="rejectReason" placeholder="请填写驳回理由..." class="modal-textarea"/>
					<view class="modal-actions">
						<button @click="confirmReject" class="btn btn-primary">确定</button>
						<button @click="showRejectModal=false" class="btn btn-secondary">取消</button>
					</view>
				</view>
			</view>
			<!-- 详情弹窗 -->
			<view v-if="showDetailModal" class="modal-mask" @click="showDetailModal=false">
				<view class="modal-box" @click.stop>
					<view class="modal-header">
						<text class="modal-icon">📋</text>
						<text class="modal-title">详情信息</text>
					</view>
					<view class="modal-content">
						<view class="detail-item" v-for="(v, k) in detailItem" :key="k">
							<text class="detail-key">{{ k }}：</text>
							<text class="detail-value">{{ v }}</text>
						</view>
					</view>
					<view class="modal-actions">
						<button @click="showDetailModal=false" class="btn btn-primary">关闭</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部批量操作条 -->
		<view
			v-if="currentList.length"
			class="fixed-batch-bar"
		>
			<view class="batch-checkbox">
				<checkbox :checked="isAllChecked" @change="toggleAllCheck" />
				<text class="batch-text">全选</text>
			</view>
			<button class="btn btn-batch" @click="batchPass">
				<text class="btn-icon">✅</text>
				批量通过
			</button>
			<button class="btn btn-batch btn-reject" @click="batchReject">
				<text class="btn-icon">❌</text>
				批量驳回
			</button>
		</view>
		<CustomTabBar :isAdmin="true" />
	</view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		data() {
			return {
				activeTab: 'task',
				// 示例数据，实际应通过接口获取
				taskList: [
					{ id: 1, title: '出二手书', type: '出物', user: '张三', time: '2024-06-01 10:00', desc: '九成新教材，价格合理', aiFlag: false },
					{ id: 2, title: '代拿快递', type: '代拿', user: '李四', time: '2024-06-01 11:00', desc: '帮忙拿快递，价格偏高', aiFlag: true }
				],
				postList: [
					{ id: 3, title: '失物招领：钥匙', type: '失物招领', user: '王五', time: '2024-06-01 09:30', desc: '在图书馆捡到一把钥匙' }
				],
				chatList: [
					{ id: 4, type: '交易纠纷', userA: '张三', userB: '李四', reason: '恶意评价', content: '你骗人！' }
				],
				checkedIds: [],
				isAllChecked: false,
				showRejectModal: false,
				rejectReason: '',
				rejectTarget: null, // 单条或批量
				showDetailModal: false,
				detailItem: {}
			};
		},
		components: {
			CustomTabBar
		},
		methods: {
			switchTab(tab) {
				if (this.activeTab !== tab) {
					this.activeTab = tab;
				}
			},
			// 多选
			toggleCheck(id) {
				const idx = this.checkedIds.indexOf(id);
				if (idx > -1) this.checkedIds.splice(idx, 1);
				else this.checkedIds.push(id);
				this.isAllChecked = this.checkedIds.length === this.taskList.length;
			},
			toggleAllCheck() {
				if (this.isAllChecked) {
					this.checkedIds = [];
					this.isAllChecked = false;
				} else {
					this.checkedIds = this.taskList.map(i => i.id);
					this.isAllChecked = true;
				}
			},
			// 批量操作
			batchPass() {
				if (!this.checkedIds.length) return uni.showToast({ title: '请选择任务', icon: 'none' });
				uni.showToast({ title: '批量通过', icon: 'success' });
				// 实际应调用接口
			},
			batchReject() {
				if (!this.checkedIds.length) return uni.showToast({ title: '请选择任务', icon: 'none' });
				this.rejectTarget = 'batch';
				this.showRejectModal = true;
				this.rejectReason = '';
			},
			// 单条操作
			pass(item) { uni.showToast({ title: '任务已通过', icon: 'success' }); },
			openReject(item) {
				this.rejectTarget = item;
				this.showRejectModal = true;
				this.rejectReason = '';
			},
			confirmReject() {
				if (!this.rejectReason) return uni.showToast({ title: '请填写理由', icon: 'none' });
				if (this.rejectTarget === 'batch') {
					uni.showToast({ title: '批量驳回', icon: 'none' });
					// 实际应调用接口
				} else {
					uni.showToast({ title: '已驳回', icon: 'none' });
					// 实际应调用接口
				}
				this.showRejectModal = false;
			},
			// 详情弹窗
			openDetail(item) {
				this.detailItem = item;
				this.showDetailModal = true;
			},
			// 帖子审核
			passPost(item) { uni.showToast({ title: '帖子已通过', icon: 'success' }); },
			deletePost(item) { uni.showToast({ title: '帖子已删除', icon: 'none' }); },
			topPost(item) { uni.showToast({ title: '已置顶', icon: 'success' }); },
			excellentPost(item) { uni.showToast({ title: '已加精', icon: 'success' }); },
			warnUser(item) { uni.showToast({ title: '已警告用户', icon: 'none' }); },
			// 交易监控
			passChat(item) { uni.showToast({ title: '无异常', icon: 'success' }); },
			punishUser(item) { uni.showToast({ title: '已处理违规', icon: 'none' }); }
		},
		computed: {
			currentList() {
				if (this.activeTab === 'task') return this.taskList;
				if (this.activeTab === 'post') return this.postList;
				if (this.activeTab === 'chat') return this.chatList;
				return [];
			}
		}
	};
</script>

<style lang="scss">
	.content-manage-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 80vh;
		background: #f5f6fa;
		padding: 32rpx 32rpx 180rpx 32rpx;

		.top-nav-bar {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			background: #ffffff;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
			border-radius: 16px;
			margin-bottom: 24px;
			padding: 16px 0;
			
			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 12rpx 24rpx;
				font-size: 16px;
				color: #666;
				border-radius: 12px;
				margin: 0 20rpx;
				cursor: pointer;
				transition: all 0.3s ease;
				
				&.active, &:hover {
					background: #f0f2f5;
					color: #2c3e50;
					font-weight: 500;
				}
				
				.nav-icon {
					font-size: 24rpx;
					margin-bottom: 4rpx;
					opacity: 0.8;
				}
				
				.nav-text {
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}
		
		.main-content {
			flex: 1;
			width: 100%;
			max-width: 1200rpx;
			margin: 0 auto;
			padding: 0 0 24rpx 0;
			
			.content-section {
				background: #ffffff;
				border-radius: 16px;
				padding: 32rpx;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
			}
			
			.section-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				padding-bottom: 16rpx;
				border-bottom: 1px solid #edf2f7;
				
				.section-title {
					display: flex;
					align-items: center;
					gap: 12rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #2c3e50;
					
					.title-icon {
						font-size: 36rpx;
						color: #718096;
					}
				}
				
				.section-badge {
					font-size: 22rpx;
					color: #718096;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;
					background: #f8fafc;
					border: 1px solid #e2e8f0;
				}
			}
			
			.section-desc {
				font-size: 26rpx;
				color: #64748b;
				margin-bottom: 32rpx;
				line-height: 1.8;
				padding: 20rpx;
				background: #f8fafc;
				border-radius: 8rpx;
				border-left: 3px solid #cbd5e1;
			}
			
			.empty-state {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 80rpx 40rpx;
				text-align: center;
				
				.empty-icon {
					font-size: 80rpx;
					margin-bottom: 24rpx;
					color: #94a3b8;
				}
				
				.empty-text {
					font-size: 28rpx;
					font-weight: 500;
					color: #475569;
					margin-bottom: 12rpx;
				}
				
				.empty-desc {
					font-size: 24rpx;
					color: #94a3b8;
					line-height: 1.5;
				}
			}
			
			.card-list {
				.audit-card {
					display: flex;
					align-items: flex-start;
					background: #fff;
					border-radius: 18rpx;
					box-shadow: 0 2rpx 12rpx rgba(74,144,226,0.06);
					margin-bottom: 24rpx;
					padding: 28rpx 32rpx 20rpx 32rpx;
					border: 1rpx solid #e5e6eb;
					transition: box-shadow 0.2s, border 0.2s;
					&:hover {
						box-shadow: 0 4rpx 16rpx rgba(74,144,226,0.10);
						border: 1rpx solid #4a90e2;
					}
					.card-checkbox {
						width: 48rpx;
						display: flex;
						align-items: flex-start;
						justify-content: center;
						margin-right: 20rpx;
						margin-top: 8rpx;
						checkbox {
							transform: scale(1.2);
						}
					}
					.card-content {
						flex: 1;
						display: flex;
						flex-direction: column;
					}
					.card-header {
						display: flex;
						align-items: center;
						gap: 16rpx;
						margin-bottom: 12rpx;
						flex-wrap: wrap;
						.card-title {
							font-size: 30rpx;
							font-weight: bold;
							color: #222;
							flex: 1;
							min-width: 200rpx;
						}
						.card-type {
							font-size: 22rpx;
							color: #4a90e2;
							background: #f0f4fa;
							border-radius: 8rpx;
							padding: 4rpx 12rpx;
							border: 1rpx solid #e5e6eb;
							font-weight: 500;
						}
						.ai-flag {
							display: flex;
							align-items: center;
							gap: 4rpx;
							font-size: 20rpx;
							color: #e57373;
							background: #fff0f0;
							border-radius: 8rpx;
							padding: 4rpx 12rpx;
							border: 1rpx solid #e57373;
							font-weight: 500;
							.ai-icon {
								font-size: 18rpx;
							}
						}
					}
					.card-info {
						display: flex;
						flex-wrap: wrap;
						gap: 24rpx;
						margin-bottom: 10rpx;
						.info-item {
							display: flex;
							align-items: center;
							gap: 8rpx;
							font-size: 24rpx;
							color: #666;
							.info-label {
								color: #888;
							}
							.user {
								color: #4a90e2;
								font-weight: 600;
							}
							.time {
								color: #aaa;
							}
							.reason {
								color: #e57373;
								font-weight: 500;
							}
						}
					}
					.card-desc {
						display: flex;
						gap: 8rpx;
						font-size: 24rpx;
						color: #444;
						margin-bottom: 18rpx;
						padding: 14rpx 18rpx;
						background: #f9fafb;
						border-radius: 8rpx;
						line-height: 1.6;
						border-left: 3rpx solid #4a90e2;
						.desc-label {
							font-weight: 500;
							color: #4a90e2;
							white-space: nowrap;
						}
					}
					.card-actions {
						display: flex;
						flex-wrap: wrap;
						gap: 15rpx;
						justify-content: flex-start;
						.btn {
							display: flex;
							align-items: center;
							gap: 6rpx;
							font-size: 22rpx;
							border-radius: 8rpx;
							padding: 10rpx 24rpx;
							border: 1rpx solid #e5e6eb;
							font-weight: 500;
							background: #fff;
							color: #4a90e2;
							box-shadow: 0 2rpx 6rpx rgba(74,144,226,0.04);
							transition: background 0.2s, color 0.2s, border 0.2s;
							&:active {
								background: #e5e6eb;
							}
							&.btn-pass {
								background: #4a90e2;
								color: #fff;
								border: 1rpx solid #4a90e2;
								&:active {
									background: #357ab8;
								}
							}
							&.btn-reject {
								background: #fff0f0;
								color: #e57373;
								border: 1rpx solid #e57373;
								&:active {
									background: #ffeaea;
								}
							}
							&.btn-warn {
								background: #fff0f0;
								color: #e57373;
								border: 1rpx solid #e57373;
								&:active {
									background: #ffeaea;
								}
							}
						}
					}
				}
			}
			
			.modal-mask {
				position: fixed;
				left: 0; top: 0; right: 0; bottom: 0;
				background: rgba(0, 0, 0, 0.4);
				z-index: 999;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.modal-box {
				background: #ffffff;
				border-radius: 12rpx;
				padding: 32rpx;
				min-width: 500rpx;
				max-width: 80vw;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				
				.modal-header {
					display: flex;
					align-items: center;
					gap: 16rpx;
					margin-bottom: 24rpx;
					padding-bottom: 16rpx;
					border-bottom: 1px solid #edf2f7;
					
					.modal-icon {
						font-size: 32rpx;
						color: #718096;
					}
					
					.modal-title {
						font-size: 30rpx;
						font-weight: 600;
						color: #2d3748;
					}
				}
				
				.modal-textarea {
					width: 100%;
					min-height: 120rpx;
					border: 1px solid #e2e8f0;
					border-radius: 8rpx;
					padding: 16rpx;
					font-size: 26rpx;
					margin-bottom: 24rpx;
					background: #f8fafc;
					resize: none;
					transition: all 0.2s ease;
					
					&:focus {
						outline: none;
						border-color: #4a5568;
						background: #ffffff;
					}
					
					&::placeholder {
						color: #a0aec0;
					}
				}
				
				.modal-content {
					margin-bottom: 24rpx;
					
					.detail-item {
						display: flex;
						margin-bottom: 12rpx;
						padding: 12rpx;
						background: #f8fafc;
						border-radius: 6rpx;
						
						.detail-key {
							font-size: 24rpx;
							color: #718096;
							font-weight: 500;
							min-width: 120rpx;
						}
						
						.detail-value {
							font-size: 24rpx;
							color: #2d3748;
							flex: 1;
						}
					}
				}
				
				.modal-actions {
					display: flex;
					justify-content: flex-end;
					gap: 16rpx;
					
					.btn {
						padding: 12rpx 24rpx;
						border-radius: 8rpx;
						font-size: 26rpx;
						font-weight: 500;
						transition: all 0.2s ease;
						
						&.btn-primary {
							background: #4a5568;
							color: #fff;
							border: none;
							
							&:hover {
								background: #2d3748;
							}
						}
						
						&.btn-secondary {
							background: #edf2f7;
							color: #4a5568;
							border: 1px solid #e2e8f0;
							
							&:hover {
								background: #e2e8f0;
								color: #2d3748;
							}
						}
					}
				}
			}
		}
	}

	// 动画效果
	.fade-enter-active, .fade-leave-active {
		transition: all 0.3s ease;
	}
	.fade-enter, .fade-leave-to {
		opacity: 0;
		transform: translateY(10px);
	}

	// 固定底部批量操作条
	.fixed-batch-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 100rpx;
		z-index: 1001;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24rpx;
		background: #ffffff;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
		padding: 20rpx 40rpx;
		border-radius: 16rpx 16rpx 0 0;
		width: 100vw;
		min-height: 80rpx;

		.batch-checkbox {
			display: flex;
			align-items: center;
			gap: 12rpx;
			font-size: 28rpx;
			color: #2d3748;
			font-weight: 500;
			user-select: none;
			
			checkbox {
				transform: scale(1.2);
			}
			
			.batch-text {
				font-weight: 500;
			}
		}

		.btn-batch {
			display: flex;
			align-items: center;
			gap: 8rpx;
			min-width: 160rpx;
			height: 60rpx;
			background: #4a5568;
			color: #fff;
			border-radius: 8rpx;
			border: none;
			font-size: 28rpx;
			font-weight: 500;
			margin: 0 8rpx;
			transition: all 0.2s ease;
			
			&:hover {
				background: #2d3748;
			}
			
			.btn-icon {
				font-size: 24rpx;
			}
			
			&.btn-reject {
				background: #f56565;
				
				&:hover {
					background: #e53e3e;
				}
			}
		}
	}

	.post-actions {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		padding-top: 16rpx;
		border-top: 1px solid #edf2f7;
		margin-top: 16rpx;

		.action-group {
			display: flex;
			gap: 12rpx;
			flex-wrap: wrap;

			.btn {
				flex: 1;
				min-width: 160rpx;
				justify-content: center;
				
				&.btn-secondary {
					background: #edf2f7;
					color: #4a5568;
					border: 1px solid #e2e8f0;
					
					&:hover {
						background: #e2e8f0;
						color: #2d3748;
					}
				}
			}
		}
	}
</style>
